<template>
  <div>
    <el-dialog
      title="新建分报告"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <report :infoid="id" :applynumber="postForm.applynumber" :versionnum="versionnum" :read-only="false" :timestamp="subtimestamp" @dialogHide="dialogHide($event)" />
    </el-dialog>
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <h1 style="text-align:center">道路运输车辆达标车型总报告</h1>
      <h3 style="text-align:center">{{ postForm.srptCplx }}</h3>
      <table class="zbgtable">
        <tr>
          <th>报告编号</th>
          <td colspan="5" style="text-align:left">
            <template v-if="readOnly">{{ postForm.srptBgbh }}</template>
            <el-form-item v-else prop="srptBgbh">
              <el-input v-model.trim="postForm.srptBgbh" style="width:610px" />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th width="200">受检单位</th>
          <td width="400">{{ postForm.srptWtdw }}</td>
          <th width="200">产品型号</th>
          <td width="400">{{ postForm.sggxh }}</td>
          <th width="200">产品名称</th>
          <td width="400">{{ postForm.srptYpmc }}</td>
        </tr>
        <tr>
          <th>生产企业</th>
          <td colspan="3" style="text-align:left">{{ postForm.srptCompany }}</td>
          <th>申请编号</th>
          <td>{{ postForm.applynumber }}</td>
        </tr>
        <tr>
          <th>结论</th>
          <td colspan="5" style="text-align:left">
            <template v-if="readOnly">{{ postForm.srptJyjl }}</template>
            <el-form-item v-else prop="srptJyjl">
              <el-input v-model.trim="postForm.srptJyjl" style="width:610px" />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th>备注</th>
          <td colspan="5" style="text-align:left">
            <template v-if="readOnly">{{ postForm.sbz }}</template>
            <el-form-item v-else prop="sbz">
              <el-input v-model.trim="postForm.sbz" style="width:610px" />
            </el-form-item>
          </td>
        </tr>
      </table>
      <div>
        <el-table
          ref="processTable"
          :data="reportList"
          border
          fit
          highlight-current-row
          style="width: 100%;margin-bottom:20px;"
        >
          <el-table-column prop="repCod" label="项目编号" width="80" align="center" />
          <el-table-column prop="repName" label="检验项目" min-width="150" align="left" />
          <el-table-column prop="versionnum" label="版本号" width="90" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.versionnum }}<el-button v-if="!readOnly" type="primary" @click="createReport(scope.row.versionnum)">新建</el-button></div>
            </template>
          </el-table-column>
          <el-table-column prop="jyyj" label="检验依据" width="150" align="center" />
          <el-table-column prop="srptJylb" label="检验类别" width="80" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.srptJylb }}</div>
              <el-select v-else v-model="scope.row.srptJylb">
                <el-option v-for="item in jlpdList" :key="item" :label="item" :value="item" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="trealnum" label="实测数量" width="80" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.trealnum }}</div>
              <el-input-number v-else v-model="scope.row.trealnum" :min="0" :precision="0" style="width:150px;" />
            </template>
          </el-table-column>
          <el-table-column prop="tproductmodel" label="视同产品型号" width="200" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.tproductmodel }}</div>
              <el-input v-else v-model="scope.row.tproductmodel" style="width:260px" />
            </template>
          </el-table-column>
          <el-table-column prop="srptBaogbh" label="报告编号" width="200" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.srptBaogbh }}</div>
              <el-input v-else v-model="scope.row.srptBaogbh" style="width:260px" />
            </template>
          </el-table-column>
          <el-table-column prop="srptJlpd" label="检验结果" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.srptJlpd }}</div>
              <el-select v-else v-model="scope.row.srptJlpd">
                <el-option label="符合" value="符合" />
                <el-option label="不符合" value="不符合" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="sbz" label="备注" width="200" align="center">
            <template slot-scope="scope">
              <div v-if="readOnly">{{ scope.row.sbz }}</div>
              <el-input v-else v-model="scope.row.sbz" style="width:160px" />
            </template>
          </el-table-column>
          <!--
          <el-table-column prop="xb" label="检验依据" width="300" align="left">

            <template slot-scope="scope">
              {{ showJyyj(scope.row.versionnum) }}
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <el-form-item v-if="!readOnly" style="margin:10px 0 0 0">
        <el-button type="primary" :loading="loading" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import report from './report'
const defaultForm = {
  dreports: [], // 分报告数据
  sbz: '', // 备注
  sggxh: '', // 规格型号
  srptBgbh: '', // 报告编号
  srptCompany: '', // 生产企业
  srptCplx: '', // 产品类型
  srptJydw: '', // 检验单位
  srptJyjl: '', // 检验结论
  srptWtdw: '', // 委托单位
  srptYpmc: '', // 样品名称
  id: null
}
export default {
  name: 'ArticleDetail',
  components: { report },
  props: {
    readOnly: {
      type: Boolean,
      default: false
    },
    infoid: {
      type: String,
      default: ''
    },
    timestamp: {
      type: Number,
      default: 0
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (!value) {
        // this.$message({
        //   message: '请将表单填写完整',
        //   type: 'error'
        // })
        callback(new Error('必填项'))
      } else {
        callback()
      }
    }
    return {
      subtimestamp: '',
      dialogVisible: false,
      versionnum: '',
      rules: {
        srptBgbh: [{ validator: validateRequire }],
        srptJyjl: [{ validator: validateRequire }]
      },
      reportList: [],
      myid: 0,
      id: 0,
      myHeaders: {},
      imageUrl: '',
      infoLoading: false,
      postForm: Object.assign({}, defaultForm),
      loading: false,
      cplxList: [{ label: '客车', value: 1 }, { label: '乘用车', value: 2 }, { label: '载货汽车', value: 4 }, { label: '挂车', value: 5 }, { label: '牵引车', value: 6 }]
    }
  },
  watch: {
    timestamp: {
      handler(val, oldVal) {
        this.mystep = this.step
        this.myid = this.infoid
        this.getData(this.myid)
      },
      immediate: true
    }
  },
  mounted() {
    this.myHeaders = {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  },
  methods: {
    createReport(versionnum) {
      this.dialogVisible = true
      this.versionnum = versionnum
      this.subtimestamp = new Date().getTime()
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        console.log(valid)
        if (valid) {
          const dreports = this.reportList.filter(item => item.srptBaogbh).map(item => {
            return {
              'versionnum': item.versionnum, // 版本号（必填）
              'sbz': item.sbz, // 备注
              'srptBaogbh': item.srptBaogbh, // 分报告编号（必填）
              'srptJlpd': item.srptJlpd, // 检验结论
              'srptJylb': item.srptJylb === '实测' ? '△' : '○', // 检验类别
              'tproductmodel': item.tProductmodel, // 视同产品型号
              'trealnum': item.trealnum// 实测数量
            }
          })
          const para = {
            applynumber: this.myid,
            dreports: dreports,
            sggxh: this.postForm.sggxh,
            sbz: this.postForm.sbz,
            srptBgbh: this.postForm.srptBgbh,
            srptCompany: this.postForm.srptCompany,
            srptCplx: this.postForm.srptCplx,
            srptJydw: this.postForm.srptJydw,
            srptJyjl: this.postForm.srptJyjl,
            srptWtdw: this.postForm.srptWtdw,
            srptYpmc: this.postForm.srptYpmc
          }
          this.loading = true
          this.$http
            .post('/api/check/updateTotalReport', para)
            .then(response => {
              this.loading = false
              if (response.data.success === true) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('dialogHide')
                this.postForm = Object.assign({}, defaultForm)
                this.loading = false
              } else {
                console.log('提交失败:' + response.data.message)
                this.$message({
                  message: '提交失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(function(error) {
              console.log(error)
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    showReport(versionnum, col) {
      const report = this.postForm.dreports.find(item => item.versionnum === versionnum)
      if (report) {
        console.log('myreport')
        console.log(report)
        return report[col]
      }
    },
    getData(id) {
      this.infoLoading = true
      if (id) {
        this.$http
          .get('/api/check/getTotalReport?&totalReportNumber=' + id)
          .then(response => {
            this.infoLoading = false
            if (response.data.success === true) {
              this.postForm = response.data.result
              // this.getReportList(this.cplxList.find(item => item.label === this.postForm.srptCplx).value)
              this.getReportList(this.postForm.srptQa067)
            } else {
              console.log('获取失败:' + response.data.message)
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.infoLoading = false
          })
      }
    },
    getReportList(cartype) {
      this.$http
        .get('/api/check/getConfigList?carType=' + cartype)
        .then(response => {
          this.infoLoading = false
          if (response.data.success === true) {
            this.reportList = response.data.result.filter(item => item.repCod !== '00')
            this.reportList.forEach(item => {
              const findReport = JSON.parse(this.postForm.reportsJdoc).find(it => it.versionnum === item.versionnum)
              console.log('findReport')
              console.log(findReport)
              if (findReport) {
                item.sbz = findReport.sBz
                item.srptJlpd = findReport.sRptJlpd
                item.srptJylb = findReport.sRptJylb
                item.trealnum = findReport.tRealnum
                item.srptBaogbh = findReport.sRptBaogbh
                item.tproductmodel = findReport.tProductmodel
              }
            })
            console.log(this.reportList)
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.infoLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.zbgtable,.zbgtable tr th, .zbgtable tr td { border:1px solid rgb(223, 230, 236)}
.zbgtable { margin-bottom: 20px; width: 100%; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
</style>
